<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Qweas Bookstore - Customer List</title>
    <link href="../css/ui.css" rel="stylesheet"/>
    <link href="../css/framework.css" rel="stylesheet"/>
    <link href="../css/admin.css" rel="stylesheet"/>
    <link href="../css/font-awesome.min.css" rel="stylesheet"/>

    <!-- Import jQuery, Bootstrap and DataTables -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/DataTables-1.10.16/css/dataTables.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/FixedHeader-3.1.3/css/fixedHeader.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/KeyTable-2.3.2/css/keyTable.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/Responsive-2.2.1/css/responsive.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/Scroller-1.4.4/css/scroller.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/Select-1.2.5/css/select.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-select.min.css"/>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../assets/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../assets/DataTables-1.10.16/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../assets/FixedHeader-3.1.3/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="../assets/KeyTable-2.3.2/js/dataTables.keyTable.min.js"></script>
    <script type="text/javascript" src="../assets/Responsive-2.2.1/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="../assets/Responsive-2.2.1/js/responsive.bootstrap.min.js"></script>
    <script type="text/javascript" src="../assets/Scroller-1.4.4/js/dataTables.scroller.min.js"></script>
    <script type="text/javascript" src="../assets/Select-1.2.5/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-select.min.js"></script>
</head>
<body>
<div id="header">
    <img id="imgLogo" style="margin-left: 10px" src="../images/bookstore_logo.png"/>
    <div id="navbar" align="right">
        <!-- Control buttons -->
        <div id="toggleBookMgr" class="ctrl-panel-item font-navbar ctrl-left">
            <a href="admin.jsp"><i class="fa fa-book font-navbar"></i>&nbsp;Books</a>
        </div>
        <div id="toggleUserMgr" class="ctrl-panel-item font-navbar ctrl-active">
            <a href="#"><i class="fa fa-users font-navbar"></i>&nbsp;Customers</a>
        </div>
        <div id="toogleCommentMgr" class="ctrl-panel-item font-navbar">
            <a href="commentmgr.jsp"><i class="fa fa-comment font-navbar"></i>&nbsp;Comments</a>
        </div>
        <div id="toggleOrderMgr" class="ctrl-panel-item font-navbar ctrl-right">
            <a href="ordermgr.jsp"><i class="fa fa-dollar font-navbar"></i>&nbsp;Orders</a>
        </div>&nbsp;&nbsp;&nbsp;
        <!-- Logout -->
        <div id="btnSignout" class="navbar_item div-button font-navbar">
            <i class="fa fa-sign-out font-navbar"></i>&nbsp;EXIT
        </div>
    </div>
</div>
<div id="content">
    <!-- CONTENTS -->
    <div class="bs-container">
        <div id="table-container">
            <table id="userTable" class="table table-striped table-bordered table-hover no-cursor" style="width: 100%">
                <thead>
                <tr>
                    <th>ID.</th>
                    <th>Username</th>
                    <th>Citizen ID</th>
                    <th>Real Name</th>
                    <th>Gender</th>
                    <th>Telephone</th>
                    <th>Password</th>
                    <th>isAdmin</th> <!-- hidden -->
                    <th>Balance</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <div id="footer" align="center">
        <p style="font-size: 13px; color: lightgray;">
            © 2018 Qweas Bookstore, Zhang Wenqiang, Wu Jiatian, Ethan Phung, Andrew Lu and Eric Shuai. All rights
            reserved.</p>
    </div>
</div>
<script>
    $(document).ready(function() {
        var table = $('#userTable').DataTable({
            columns: [
                { data: 'CustomerId' },
                { data: 'UserName' },
                { data: 'IDNumber' },
                { data: 'RealName' },
                { data: 'Gender' },
                { data: 'Telephone' },
                { data: 'PASSWORD' },
                { data: 'isAdmin' },
                { data: 'Balance' }
            ],
            columnDefs: [
                { targets: [7], visible: false, searchable: false }
            ],
            ajax: {
                url: '../getAllCustomer',
                type: 'POST',
                dataSrc: ''
            },
            createdRow: function(row, data, index) {
                // highlight admin account
                var isAdmin = parseInt(data['isAdmin']);

                if(isAdmin) {
                    $('tr', row).addClass('red');
                } else
                    $('tr', row).removeClass('red');
            }
        });
        
        $('#btnSignout').click(function () {
        	window.location.replace("../login.jsp");
        });
    });
</script>
</body>
</html>